<template>
	<div class="RecordDetail">
		<v-header></v-header>
		<div class="item-box">
			<div class="top">
				<div class="left">
					<h3>流水号：{{fatherItem.sequence}}</h3>
				</div>
				<!--<div class="right">
					<h3>状态：<font color="#00CC66">{{getStatusVal(1)}}</font></h3>
				</div>-->
			</div>	
			<div class="content" v-if="isBuyOrSell == 'buy'">
				<div class="left">
					<p>操作：<font color="#F32043">买入</font></p>
					<p>买家编号：{{fatherItem.buyUsername}}</p>
					<p>卖家编号：{{fatherItem.sellUsername}}</p>
				</div>
				<div class="right">
					<p>KBC数量：<font color="#F32043">{{fatherItem.dealNumber}}</font></p>
					<p>单价：<font color="#F32043">{{fatherItem.dealPrice}}</font></p>
					<p>合计：<font color="#F32043">{{total(fatherItem.dealNumber,fatherItem.dealPrice)}}</font></p>
				</div>
			</div>
			<div class="content" v-else>
				<div class="left">
					<p>操作：<font color="#2BAF4A">卖出</font></p>
					<p>买家编号：{{fatherItem.buyUsername}}</p>
					<p>卖家编号：{{fatherItem.sellUsername}}</p>
				</div>
				<div class="right">
					<p>KBC数量：<font color="#2BAF4A">{{fatherItem.dealNumber}}</font></p>
					<p>单价：<font color="#2BAF4A">{{fatherItem.dealPrice}}</font></p>
					<p>合计：<font color="#2BAF4A">{{total(fatherItem.dealNumber,fatherItem.dealPrice)}}</font></p>
				</div>
			</div>
			<div class="bottom">
				<div class="left">
					<h3>出售时间：{{fatherItem.createTime}}</h3>
				</div>
			</div>	
		</div>
		<div class="" style="font-size: 1.3rem;text-align: center;padding: 10px 0;font-weight: 700;background-color: #f5e6d6;border: 1px solid #DEDEDE;">
			详细信息
		</div>
		<div class="">
			<ul class="table-min-box">
				<li v-if="isShow">
					<div class="no-data">
						暂无数据！
					</div>
				</li>
				<li v-if="items!=''" v-for="item in items">
					<div class="item-box" style="background-color: #f5e6d6;">
						<div class="top">
							<div class="left">
								<h3 v-if="isBuyOrSell == 'buy'">订单号：{{item.sellCode}}</h3>
								<h3 v-else>订单号：{{item.buyCode}}</h3>
							</div>
							<div class="right">
								<h3>打款状态：<font color="#00CC66">{{getStatusVal(item.matchingStatus)}}</font></h3>
							</div>
						</div>	
						<div class="content">
							<div class="left">
								<p>买家用户名：<font color="#00CC66">{{item.userName}}</font></p>
								<p>买家姓名：<font color="#00CC66">{{item.realName}}</font></p>
								<p>买家手机号：<font color="#00CC66">{{item.phone}}</font></p>
							</div>
							<div class="right">
								<p>购买数量：<font color="#00CC66">{{item.kbcNum}}</font></p>
								<p>单价：<font color="#00CC66">{{item.kbcPrice}}</font></p>
								<p>总价：<font color="#00CC66">{{total(item.kbcNum,item.kbcPrice)}}</font></p>
							</div>
						</div>
						<div class="bottom">
							<div class="left">
								<h3>打款时间：{{item.createTime}}</h3>
							</div>
						</div>	
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>
<script>
import router from './../../router';
	import util from './../../js/util/util.js';
	import vHeader from './../common/Header.vue';
	import { Navbar, TabItem, Toast, Loadmore } from 'mint-ui';
	let interval;
	export default {
		data() {
			return {
		        isShow: false,
				items:[],
				fatherItem:[],
				sellOrBuyId:'',
				isBuyOrSell:''

			};
		},
		components: { // 声明子组件
			Navbar,
			TabItem,
			Toast,
			Loadmore,
			vHeader
		},
		methods: {
			total: function(a,b){ //卖出输入时计算
				var res = 0.0;
				if(!util.isEmpty(a)&&!util.isEmpty(b)){
					res = (Number(a)*Number(b)).toFixed(2);
				}
				return res;
			},
			querySellXq: function(item,flag) { //卖出详情
				let $this = this;
				let url = "";
				if (flag == "buy") {
					url = '/kbc/trade/queryDealSellerList?buyInfoId='+item.buyInfoId;
				} else{
					url = '/kbc/trade/queryDealBuyerList?sellInfoId='+item.sellInfoId;
				}
				util.Ajax(url, "GET", {}, function(data) { //成功
					if(data) {
						if(data.code == "0") {
							$this.items = data.items;
							if ($this.items.length > 0) {
								$this.isShow = false;
							} else{
								$this.isShow = true;
							}
						}else{
							$this.isShow = true;
							Toast(data.msg);
						}
					}
				});
			},
			getStatusVal: function(code){
				if(code=='1'){
					return "已匹配";
				}else if(code=='2'){
					return "已打款";
				}else if(code=='3'){
					return "已结束";
				}else{
					return code;
				}
			}
		},
		created() {
			this.$store.state.headings = this.$router.history.current.name; //修改标题
			this.$store.state.isFooterShow = true; //显示底部导航
			this.$store.state.flag = 1;
		},
		mounted: function() {
			this.fatherItem = this.$route.query.item;
			if(!util.isEmpty(this.fatherItem.id)){
				localStorage.setItem("fatherItem",JSON.stringify(this.fatherItem));
			}else{
				this.fatherItem = JSON.parse(localStorage.getItem("fatherItem"));
			}
			this.isBuyOrSell = this.$route.query.flag;
			this.querySellXq(this.fatherItem,this.isBuyOrSell);
		}
	}
</script>


<style>
	.RecordDetail{margin-top: 4rem;}
	.RecordDetail .mint-popup-1 {
		width: 85%;
		border-radius: 8px;
		min-height: 200px;
		z-index: 9999;
		/*transform: translate(-50%, 0);*/
	}
    .RecordDetail .mint-popup-1 .mint-popup-title{font-size: 1.3rem;}
    .RecordDetail .mint-popup-1 .mint-popup-main{padding: 10px;}
	.RecordDetail .mint-popup-1 .mint-popup-main .mint-popup-content{font-size: 1.2rem;}
	.RecordDetail .mint-popup-1 .mint-popup-main .mint-popup-content p{margin: 5px auto;}
	.RecordDetail .mint-popup-1 .mint-popup-main .mint-popup-img{width: 100%;height:100px;margin-top:10px;box-sizing: border-box;}
	.RecordDetail .mint-popup-1 .mint-popup-main .mint-popup-img .pic{width:90%; height: 100px;border: 5px solid #CECECE;position: absolute; bottom:4rem; left: 1rem;}
	.RecordDetail .mint-popup-1 .mint-popup-main .mint-popup-img .form-choose{position: absolute; bottom:5rem; left: 0;width:100%;height:100px; opacity: 0;}
	.RecordDetail .mint-popup-1 .mint-popup-main .mint-popup-btn{display: flex;margin:5px auto;text-align: center;}
	.RecordDetail .mint-popup-1 .mint-popup-main .mint-popup-btn .cancel{-moz-box-flex: 1;-webkit-flex: 1;-ms-flex: 1;flex: 1;}
	.RecordDetail .mint-popup-1 .mint-popup-main .mint-popup-btn .sure{-moz-box-flex: 1;-webkit-flex: 1;-ms-flex: 1;flex: 1;}
	.RecordDetail .item-box{border: 1px solid #E7E1CD;min-height: 25px;width: 100%;padding: 0 10px;box-sizing: border-box;
		-webkit-border-radius: 8px; 
-moz-border-radius: 8px; 
border-radius: 8px; 
background-color: #FFFFFF;}
	.RecordDetail .item-box{border: 1px solid #E7E1CD;min-height: 25px;width: 100%;padding: 0 10px;box-sizing: border-box;
		-webkit-border-radius: 8px; 
-moz-border-radius: 8px; 
border-radius: 8px; 
background-color: #FFFFFF;}
.RecordDetail .item-box .top{
		border-bottom: 1px solid #CECECE;min-height: 30px;width: 100%;display: table;
	}
.RecordDetail .item-box .content{
		min-height: 45px;width: 100%;display: table;
	}
.RecordDetail .item-box .bottom{
		border-top: 1px solid #CECECE;min-height: 30px;width: 100%;display: table;
	}
	.RecordDetail .item-box .left {
		vertical-align:middle;   
  		display:table-cell;
		-moz-box-flex: 1;-webkit-flex: 1;-ms-flex: 1;flex: 1;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		text-align: left;
	}
	.RecordDetail .item-box .right {
		vertical-align:middle;   
  		display:table-cell;
		-moz-box-flex: 1;-webkit-flex: 1;-ms-flex: 1;flex: 1;
		text-align: right;
	}
	.RecordDetail .item-box p {
		margin: 5px auto;
	}
	.RecordDetail .mint-button--small {
		  display: inline-block;
		  font-size: 14px;
		  padding: 0 12px;
		  height: 20px;
		}
	.RecordDetail .mint-button--normal {
		font-size: 14px;
		 height: 30px;
	}
</style>